<template>
<section class="page page-theme filepreveiw-page">
  <header class="page-header">
    <router-link class="btn-close" to="/">
      <i class="el-icon-close"></i>
    </router-link>
  </header>
  
  <div class="view-box">
    <div class="view-box-inner">

      <div class="vpro" v-for="(item, index) in chacheFile" :key="index + '' + item.file.name">
        <div v-if="$fn.fileTest(item.file.type) === 'image'" class="image_waper">
          <img :src="$fn.createObjectURL(item.file)" :alt="item.file.name" :title="item.file.name">
          <div class="mask">
            <div class="file_waper">{{ item.file.name }}</div>
          </div>
        </div>

        <div v-else class="file_waper">
          {{item.file.name}}
        </div>
      </div>

    </div>
  </div>

</section>
</template>

<script>
export default {
  name: 'filepreveiw',
  computed: {
    chacheFile() {
      return this.$store.state.chacheFile
    }
  }
}
</script>

<style lang="less">

.view-box {
  padding: 20px;
  .view-box-inner {
    margin-right: -10px;
  }
}


.vpro {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 150px;
  height: 150px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 0 10px 10px 0;
  overflow: hidden;
  cursor: pointer;

  &:hover {
    .mask {
      transform: scale(1);
      opacity: 1;
    }
  }

  .image_waper {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 6px;
    box-sizing: border-box;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 4px;
    }

    .file_waper {
      background: rgba(0,0,0,.65);
    }
  }

  .file_waper {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    font-size: 14px;
    background: rgba(0,0,0,.8);
    border-radius: 4px;
    box-sizing: border-box;
    color: #fff;
    word-break: break-all;
  }

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.1);
    transition: all .2s ease-in-out;
  }
}
</style>
